<template>
 <h1>循环指令练习</h1>
<!-- v-for -->
  <ul>
<!--  循环遍历数组names   v-for="遍历 in 数组"  -->
    <li v-for="name in names">{{name}}</li>
  </ul>
<!-- 可以获取index ,v-for="(变量,index) in 数组"-->
  <ul>
    <li v-for="(name2,index) in names">{{index+":"+name2}}</li>
  </ul>
  <hr/>
  <table border="1px">
    <caption>商品列表</caption>
    <tr>
      <th>序号</th>
      <th>商品标题</th>
      <th>商品价格</th>
      <th>商品库存</th>
      <th>操作</th>
    </tr>
    <tr v-for="(prod,index) in productArr">
      <td>{{ index +1 }}</td>
      <td>{{ prod.title }}</td>
      <td>{{ prod.price }}</td>
      <td>{{ prod.num }}</td>
      <td><button @click="del(index)">删除</button> </td>
    </tr>
  </table>

  <hr/>
  <h2>请输入商品信息</h2>
  商品标题 <input type="text" v-model="product.title"> <br/>
  商品价格 <input type="text" v-model="product.price"> <br/>
  商品库存 <input type="text" v-model="product.num"> <br/>
  <button @click="add()">提交</button>
  <hr/>
<!-- 隐藏与显示 v-if  v-else -->
<!--  true,显示，false就是隐藏-->
  <p v-if="true">李三</p>
  <p v-if="false">王五</p>
  <p v-if="true">赵四</p>

  <hr/>
<!-- 连续多个v-if判断,如果只要有一个是true，v-else不会显示，不是连续判断只需要看上一个v-if的结果-->
  <p v-if="isShow">小红</p>
  <p v-if="isShow">小绿</p>
  <p v-else>小白</p>
<!-- v-show也是可以实现v-if的效果,指定函数时，函数后不能加() -->
  <p v-show="isShow">夜晚</p>
  <p v-show="isShow">白天</p>
</template>

<script setup>
//循环遍历数组，基本类型数组[,,,,,]   [{},{},{}]
import {ref} from "vue";
const isShow = ref(true);
const names = ref(["张三","李四","王五","赵六"]);
const productArr=ref([
  {title:'小米手机',price:5000,num:800},
  {title:'华为手机',price:6000,num:900},
  {title:'苹果手机',price:7000,num:100},
  {title:'三星手机',price:8000,num:200},
  {title:'三星手机',price:8000,num:200}
])
const del=(index)=>{
  if(confirm("您确定要删除该商品吗？")) {
    productArr.value.splice(index, 1);
  }
}
const product = ref({
  title:"",
  price:"",
  num:""
})
const add = ()=>{
  //push可以添加数据到对应的对象中
  productArr.value.push(product.value);
  //清空子对象product中的数据
  product.value={
    title:"",
    price:"",
    num:""
  }
}
</script>

<style scoped>

</style>